<template>
	<view class="page">
		<view class="content">
			<u-search placeholder="搜索歌曲名称" v-model="keyword" :clearabled="true" :inputStyle="{ width: '200px' }"
				@custom="Search" @search="Search" @clear="Search"></u-search>

			<u-tabs :list="cate" @click="tabSelect" :lineColor="color_value" :activeStyle="{ color: color_value }">
			</u-tabs>

			<u-cell-group>
				<u-cell :title="item.name" :label="'作者：' + item.author" center :titleStyle="{ fontSize: '20px' }"
					v-for="(item, index) in list" :key="index">
					<view slot="value" class="u-slot-value">
						<u-button type="success" text="试听" size="mini" shape="circle" @click="play(item.url)"
							:customStyle="{marginRight:'15px'}"></u-button>
						<u-button type="error" text="选择" size="mini" shape="circle" @click="check(item.id,item.name)">
						</u-button>
					</view>
				</u-cell>
			</u-cell-group>
			<u-gap height="15" bgColor="#fff"></u-gap>
			<u-loadmore :status="has_more==true?'loading':'nomore'"/>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl: 'common/cdnurl',
				color: 'common/color',
				color_value: 'common/color_value',
			})
		},
		data() {
			return {
				keyword: '',
				cate_id: 0,
				page: 1,
				has_more: true,
				cate: [],
				list: [],
				myaudio: null
			};
		},
		onLoad: function(options) {
			this.utils.hideShare()
			this.http('music/cate', '', 'get').then(res => {
				if (res.data.length >0) {
					this.cate = res.data;
					this.cate_id = res.data[0].id;
				}
				this.ajax();
			});
		},
		onReady() {
			this.myaudio = wx.createInnerAudioContext({});
		},
		onUnload() {
			this.myaudio.destroy();
			this.myaudio = null;
		},
		onHide() {
			this.myaudio.destroy();
			this.myaudio = null;
		},
		onReachBottom() {
			if (this.has_more) {
				this.ajax()
			}
		},
		methods: {
			tabSelect(e) {
				this.cate_id = e.id;
				this.page = 1;
				this.has_more = true;
				this.list = [];
				this.ajax();
			},
			Search() {
				this.page = 1;
				this.has_more = true;
				this.list = [];
				this.ajax();
			},
			ajax() {
				var data = {};
				data.cate_id = this.cate_id;
				data.page = this.page;
				if (this.keyword) data.keyword = this.keyword;

				this.http('music/index', data, 'get').then(res => {
					var data = res.data.data;
					this.list = this.list || [];
					this.list = this.list.concat(data);
					this.has_more = res.data.has_more;
					this.page++;

				});
			},
			play(url) {
				this.myaudio.pause();
				this.myaudio.src = url;
				this.myaudio.play();
			},
			check(id, name) {
				uni.$emit('updateData', {
					music_id: id,
					music_name: name,
				})
				uni.navigateBack();
			}
		}
	};
</script>

<style lang="scss">
	.content {
		background: #fff;
		padding: 10px 30rpx 30rpx;
	}

	.u-slot-value {
		@include flex;
		justify-content: space-between;
	}
</style>
